<template>
  <div class="container goodsShow">
    <!-- 1.排序 -->
    <div class="sort">
      <h1 class="">
        所有商品：<span>{{ this.$route.query.categoryname }}</span
        ><span>&nbsp</span>{{ this.$route.query.keyword }}
      </h1>
      <div class="sortList">
        <ul>
          <li class="sortTitle">排序方式</li>
          <li class="sortItem" @click="zhOrder = !zhOrder">
            综合<i class="iconfont icon-xiangxia"></i>
            <div class="orderBy" v-show="zhOrder">
              <div>升序</div>
              <div>降序</div>
            </div>
          </li>
          <li class="sortItem" @click="priceOrder = !priceOrder">
            价格<i class="iconfont icon-xiangxia"></i>
            <div class="orderBy" v-show="priceOrder">
              <div>升序</div>
              <div>降序</div>
            </div>
          </li>
          <li
            class="sortItem d-none d-md-inline-block"
            @click="salsOrder = !salsOrder"
          >
            销量<i class="iconfont icon-xiangxia"></i>
            <div class="orderBy" v-show="salsOrder">
              <div>升序</div>
              <div>降序</div>
            </div>
          </li>
          <li
            class="sortItem d-none d-md-inline-block"
            @click="honestOrder = !honestOrder"
          >
            信用<i class="iconfont icon-xiangxia"></i>
            <div class="orderBy" v-show="honestOrder">
              <div>升序</div>
              <div>降序</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 2.展示 -->
    <div class="container-fluid goodsShowBox">
      <div class="row">
        <div
          class="col-6 col-md-3 goodsList"
        v-for="(goodsList, index) in goodsInfo"
        :key="index"
        >
        <router-link :to="`/detail/${goodsList.id}`">
          <div class="goodsImg">
            <img :src="goodsList.imgUrl[0]" /><i class="iconfont icon-gouwu"></i>
          </div>
          
          <div class="goodsInfo">
            <p class="goodsShowTitle">
              {{ goodsList.title }}
            </p>
            <p class="goodsShowPrice">￥ {{ goodsList.price }}</p>
          </div>
        </router-link>
        </div>
      </div>
    </div>

    <!-- 3.底部提示 -->
    <div class="buttontext">
      <div class="goodsEnd" v-if="pageNo == totalPage">已经到底了~</div>
      <div class="moreGoods" @click="addGoods" v-else>点击加载更多...</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      pageNo: 1,
      orderSort: [false, true, false, false],
      zhOrder: false,
      priceOrder: false,
      salsOrder: false,
      honestOrder: false,
      scroll: 0, //定义初始滚动高度
    };
  },
  mounted() {
    this.refresh();
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    ...mapState({
      goodsInfo: (state) => state.goodsShow.goodsShowInfo.goodsShow,
      totalPage: (state) => state.goodsShow.goodsShowInfo.totalPage,
    }),
    keyword() {
      return this.$route.params.keyword;
    },
  },
  methods: {
    refresh() {
      this.$store.dispatch("getGoodsShow");
    },
    orderShow(orderIndex) {
      this.orderSort.forEach((item) => {
        item = false;
      });
      this.orderSort[orderIndex] = true;
    },
    addGoods() {
      this.pageNo++;
      let location = {
        name: "goodsShow",
        query: { pageNo: this.pageNo },
      };
      if (this.$route.query.categoryname) {
        location.query.categoryname = this.$route.query.categoryname;
      }
      if (this.$route.query.keyword) {
        location.query.keyword = this.$route.keyword;
      }
      this.scroll = window.scrollY; //将上次页面位置保存到data.scroll，使用keepalive可以在下一次刷新页面保留data.scroll
      this.$router.push(location);
      this.refresh();
      //使用addGoods方法添加数据并自动跳转到上一页面的位置
      this.$nextTick(() => {
        window.scroll(0, this.scroll);
        this.scroll = 0;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.goodsShow {
  width: 80%;
  margin: 0 auto;
}
button {
  width: 100%;
  margin-bottom: 10px;
  line-height: 33px;
  border: none;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}
.sort {
  padding-top: 120px;
  h1 {
    font-size: 2.5vw;
  }
  .sortList {
    margin-top: 30px;
    font-size: 1vw;
    li {
      display: inline-block;
    }
    .sortTitle {
      padding-right: 36px;
      border-right: 1px solid #000000;
    }
    .sortItem {
      position: relative;
      margin-left: 36px;
      cursor: pointer;
      i {
        margin-left: 3px;
        vertical-align: bottom;
      }
    }
    .orderBy {
      z-index: 1;
      position: absolute;
      top: 22px;
      left: 5px;
      background-color: rgb(244, 243, 243);
      border: 1px solid #a9a7a7;
      div {
        padding: 4px 6px;
      }
    }
  }
}
.goodsShowBox {
  .goodsList {
    font-size: 1vw;
  
  i {
        position: relative;
        left: 183px;
        bottom: 45px;
        font-size: 1.7em;
        cursor: pointer;
      }
    a {
      color:#333;
      text-decoration: none;
    }
    .goodsImg {
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .goodsInfo {
      .goodsShowTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 18px;
        font-size: 1.3em;
      }
      .goodsShowPrice {
        margin: 10px 0;
        font-size: 1.2em;
        color: red;
      }
    }
  }
}

.buttontext {
  width: 100%;
  text-align: center;
  padding: 17px 0;
  font-size: 1.3vw;
}
</style>
